<template>
  <view class="index-page">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar safe-area-inset-top">
      <view class="navbar-content">
        <view class="navbar-left">
          <text class="app-title">星际网咖</text>
          <view class="location-info" @click="showLocation">
            <text class="location-icon">📍</text>
            <text class="location-text">朝阳区店</text>
          </view>
        </view>
        <view class="navbar-right">
          <view class="action-btn" @click="makeCall">
            <text class="icon">📞</text>
          </view>
          <view class="action-btn" @click="showNotifications">
            <text class="icon">🔔</text>
            <view v-if="unreadCount > 0" class="badge">{{ unreadCount }}</view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 网咖状态横幅 -->
    <view class="status-banner">
      <view class="status-content">
        <view class="status-indicator">
          <view class="status-dot"></view>
          <text class="status-text">营业中</text>
        </view>
        <text class="business-hours">营业时间: 08:00-24:00</text>
      </view>
      <view class="weather-info">
        <text class="weather-text">晴 25°C</text>
      </view>
    </view>
    
    <!-- 滚动内容区域 -->
    <scroll-view 
      class="scroll-content" 
      scroll-y 
      refresher-enabled 
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <!-- 座位状态卡片 -->
      <view class="seat-status-card card">
        <view class="card-header">
          <text class="card-title">实时座位状态</text>
          <text class="update-time">{{ formatTime(seatStore.lastUpdateTime, 'HH:mm') }} 更新</text>
        </view>
        
        <view class="seat-stats">
          <view class="stat-item available" @click="goToSeatSelection">
            <text class="stat-number">{{ seatStore.seatStats.available }}</text>
            <text class="stat-label">空闲</text>
          </view>
          <view class="stat-item occupied">
            <text class="stat-number">{{ seatStore.seatStats.occupied }}</text>
            <text class="stat-label">使用中</text>
          </view>
          <view class="stat-item total">
            <text class="stat-number">{{ seatStore.seatStats.total }}</text>
            <text class="stat-label">总座位</text>
          </view>
        </view>
        
        <view class="quick-booking-btn btn-gaming" @click="goToSeatSelection">
          <text class="btn-text">立即选座</text>
          <text class="btn-icon">🎮</text>
        </view>
      </view>
      
      <!-- 未登录提示卡片 -->
      <view v-if="!userStore.isLoggedIn" class="login-prompt-card card">
        <view class="card-header">
          <text class="card-title">欢迎来到星际网咖</text>
        </view>

        <view class="prompt-content">
          <view class="prompt-icon">🎮</view>
          <text class="prompt-title">登录后享受更多服务</text>
          <text class="prompt-desc">查看订单状态、管理会员信息、享受专属优惠</text>

          <button class="login-btn" @click="goToLogin">
            <text class="btn-text">立即登录</text>
          </button>
        </view>
      </view>

      <!-- 当前订单卡片 -->
      <view v-if="userStore.isLoggedIn && orderStore.currentOrder" class="current-order-card card">
        <view class="card-header">
          <text class="card-title">当前订单</text>
          <view class="order-status" :class="{ 'in-progress': !isOrderExpired, 'expired': isOrderExpired }">
            <text class="status-text">{{ isOrderExpired ? '已到期' : '使用中' }}</text>
          </view>
        </view>
        
        <view class="order-content">
          <view class="seat-info">
            <view class="seat-main">
              <text class="seat-number">{{ orderStore.currentOrder.seatNumber }}</text>
              <text class="seat-area">{{ getSeatArea(orderStore.currentOrder.seatId) }}</text>
            </view>
            <view class="time-info">
              <text class="remaining-time" :class="{ 'expired': isOrderExpired }">{{ remainingTime }}</text>
              <text class="time-label">剩余时间</text>
            </view>
          </view>

          <!-- 订单详细信息 -->
          <view class="order-details">
            <view class="detail-item">
              <text class="detail-label">开始时间</text>
              <text class="detail-value">{{ formatTime(orderStore.currentOrder.startTime, 'HH:mm') }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">结束时间</text>
              <text class="detail-value">{{ formatTime(orderStore.currentOrder.endTime, 'HH:mm') }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">使用时长</text>
              <text class="detail-value">{{ orderStore.currentOrder.duration }}小时</text>
            </view>
          </view>

          <view class="order-actions">
            <button class="btn btn-secondary btn-small" @click="extendOrder">
              <text class="btn-text">续费</text>
            </button>
            <button class="btn btn-primary btn-small" @click="endOrder">
              <text class="btn-text">结束</text>
            </button>
          </view>
        </view>
      </view>
      
      <!-- 快捷功能 -->
      <view class="quick-actions">
        <view class="action-item" @click="goToSeatSelection">
          <view class="action-icon gaming">
            <text class="icon">🎮</text>
          </view>
          <text class="action-text">预约座位</text>
        </view>
        
        <view class="action-item" @click="goToOrders">
          <view class="action-icon orders">
            <text class="icon">📋</text>
          </view>
          <text class="action-text">我的订单</text>
          <view v-if="!userStore.isLoggedIn" class="auth-required">🔒</view>
        </view>

        <view class="action-item" @click="goToRecharge">
          <view class="action-icon recharge">
            <text class="icon">💰</text>
          </view>
          <text class="action-text">账户充值</text>
          <view v-if="!userStore.isLoggedIn" class="auth-required">🔒</view>
        </view>
        
        <view class="action-item" @click="goToMember">
          <view class="action-icon member">
            <text class="icon">👤</text>
          </view>
          <text class="action-text">会员中心</text>
        </view>
      </view>
      
      <!-- 会员信息卡片 -->
      <view v-if="userStore.isLoggedIn" class="member-card card">
        <view class="member-header">
          <image class="member-avatar" :src="userStore.userAvatar" mode="aspectFill" @click="goToMember"></image>
          <view class="member-info">
            <text class="member-name">{{ userStore.userName }}</text>
            <view class="member-level" :style="{ color: userStore.memberLevelColor }">
              <text class="level-text">{{ userStore.memberLevelName }}</text>
              <view class="level-progress">
                <view class="progress-bar" :style="{ width: userStore.memberProgress + '%', backgroundColor: userStore.memberLevelColor }"></view>
              </view>
            </view>
          </view>
          <view class="member-actions">
            <view class="action-btn" @click="goToMember">
              <text class="icon">→</text>
            </view>
          </view>
        </view>
        
        <view class="member-stats">
          <view class="stat-item" @click="goToPoints">
            <text class="stat-number">{{ userStore.points }}</text>
            <text class="stat-label">积分</text>
          </view>
          <view class="stat-item" @click="goToRecharge">
            <text class="stat-number">¥{{ formatMoney(userStore.balance) }}</text>
            <text class="stat-label">余额</text>
          </view>
          <view class="stat-item" @click="goToCoupons">
            <text class="stat-number">{{ availableCoupons }}</text>
            <text class="stat-label">优惠券</text>
          </view>
        </view>
      </view>
      
      <!-- 未登录提示 -->
      <view v-else class="login-prompt-card card" @click="goToLogin">
        <view class="login-content">
          <view class="login-icon">👤</view>
          <view class="login-text">
            <text class="login-title">登录享受更多服务</text>
            <text class="login-subtitle">积分奖励 · 会员特权 · 专属优惠</text>
          </view>
          <text class="login-arrow">→</text>
        </view>
      </view>
      
      <!-- 网咖环境展示 -->
      <view class="environment-section">
        <view class="section-header">
          <text class="section-title">网咖环境</text>
          <text class="section-more" @click="showAllEnvironment">查看更多</text>
        </view>
        
        <scroll-view class="environment-scroll" scroll-x>
          <view class="environment-item" v-for="(item, index) in environmentImages" :key="index" @click="previewImages(index)">
            <image class="environment-image" :src="item.url" mode="aspectFill"></image>
            <text class="environment-title">{{ item.title }}</text>
          </view>
        </scroll-view>
      </view>
      
      <!-- 最新活动 -->
      <view class="activity-section">
        <view class="section-header">
          <text class="section-title">最新活动</text>
        </view>
        
        <view class="activity-list">
          <view class="activity-item" v-for="activity in activities" :key="activity.id" @click="showActivity(activity)">
            <image class="activity-image" :src="activity.image" mode="aspectFill"></image>
            <view class="activity-content">
              <text class="activity-title">{{ activity.title }}</text>
              <text class="activity-desc">{{ activity.description }}</text>
              <view class="activity-meta">
                <text class="activity-time">{{ formatTime(activity.endTime, 'MM-DD') }} 截止</text>
                <view class="activity-tag">{{ activity.tag }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 公告信息 -->
      <view class="announcement-section">
        <view class="section-header">
          <text class="section-title">最新公告</text>
        </view>
        
        <view class="announcement-list">
          <view class="announcement-item" v-for="announcement in announcements" :key="announcement.id" @click="showAnnouncement(announcement)">
            <view class="announcement-content">
              <text class="announcement-title">{{ announcement.title }}</text>
              <text class="announcement-time">{{ formatRelativeTime(announcement.createdAt) }}</text>
            </view>
            <text class="announcement-arrow">→</text>
          </view>
        </view>
      </view>
      
      <!-- 底部间距 -->
      <view class="bottom-spacing safe-area-inset-bottom"></view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { useSeatStore } from '@/stores/seat'
import { useOrderStore } from '@/stores/order'
import { formatTime, formatRelativeTime, formatMoney, makePhoneCall, previewImage } from '@/utils/common'

// 使用store
const userStore = useUserStore()
const seatStore = useSeatStore()
const orderStore = useOrderStore()

// 响应式数据
const refreshing = ref(false)
const remainingTimeInterval = ref(null)
const unreadCount = ref(2)
const availableCoupons = ref(3)
const currentTime = ref(new Date())

// 计算属性
const remainingTime = computed(() => {
  if (!orderStore.currentOrder) return '00:00:00'
  const seconds = orderStore.getRemainingTime(orderStore.currentOrder)
  return orderStore.formatRemainingTime(seconds)
})

const isOrderExpired = computed(() => {
  if (!orderStore.currentOrder) return false
  const seconds = orderStore.getRemainingTime(orderStore.currentOrder)
  return seconds <= 0
})

// 环境图片数据
const environmentImages = ref([
  { url: '/static/images/environment1.jpg', title: '游戏区域' },
  { url: '/static/images/environment2.jpg', title: 'VIP包间' },
  { url: '/static/images/environment3.jpg', title: '休息区' },
  { url: '/static/images/environment4.jpg', title: '前台服务' }
])

// 活动数据
const activities = ref([
  {
    id: 1,
    title: '新用户专享大礼包',
    description: '注册即送50元代金券+100积分',
    image: '/static/images/activity1.png',
    endTime: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
    tag: '新人专享'
  },
  {
    id: 2,
    title: '周末充值享8.8折',
    description: '周六日充值100元以上享受8.8折优惠',
    image: '/static/images/activity2.webp',
    endTime: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000),
    tag: '限时优惠'
  }
])

// 公告数据
const announcements = ref([
  {
    id: 1,
    title: '系统维护通知',
    content: '为了提供更好的服务，系统将于今晚2:00-4:00进行维护升级',
    createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000)
  },
  {
    id: 2,
    title: '新增VIP包间',
    content: '全新VIP包间正式开放，配备最新游戏设备，欢迎体验',
    createdAt: new Date(Date.now() - 24 * 60 * 60 * 1000)
  }
])

// 方法
const onRefresh = async () => {
  refreshing.value = true
  
  try {
    // 刷新座位状态
    await seatStore.refreshSeats()
    
    // 刷新订单状态
    if (userStore.isLoggedIn) {
      await orderStore.fetchOrders()
    }
    
    // 模拟网络延迟
    await new Promise(resolve => setTimeout(resolve, 500))
    
    uni.showToast({
      title: '刷新成功',
      icon: 'success'
    })
  } catch (error) {
    uni.showToast({
      title: '刷新失败',
      icon: 'none'
    })
  } finally {
    refreshing.value = false
  }
}

const makeCall = () => {
  makePhoneCall('400-123-4567')
}

const showLocation = () => {
  uni.openLocation({
    latitude: 39.908823,
    longitude: 116.397470,
    name: '星际网咖朝阳区店',
    address: '北京市朝阳区xxx街道xxx号'
  })
}

// const showNotifications = () => {
//   uni.navigateTo({
//     url: '/pages/notification/notification'
//   })
// }

// 跳转到座位选择页面
const goToSeatSelection = () => {
  uni.switchTab({
    url: '/pages/seat/seat'
  })
}

// 跳转到订单选择页面
const goToOrders = () => {
  if (!userStore.isLoggedIn) {
    goToLogin()
    return
  }

  uni.switchTab({
    url: '/pages/order/order'
  })
}

// 跳转到会员选择页面
const goToMember = () => {
  uni.switchTab({
    url: '/pages/member/member'
  })
}

// 跳转到登录页面
const goToLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login'
  })
}

// 路由守卫
const goToRecharge = () => {
  if (!userStore.isLoggedIn) {
    goToLogin()
    return
  }

  uni.navigateTo({
    url: '/pages/member/recharge'
  })
}

const goToPoints = () => {
  if (!userStore.isLoggedIn) {
    goToLogin()
    return
  }
  
  // uni.navigateTo({
  //   url: '/pages/member/points'
  // })
}

const goToCoupons = () => {
  if (!userStore.isLoggedIn) {
    goToLogin()
    return
  }
  
  // uni.navigateTo({
  //   url: '/pages/member/coupons'
  // })
}

const getSeatArea = (seatId) => {
  const seat = seatStore.getSeatById(seatId)
  return seat ? seat.area : '未知区域'
}

const extendTime = () => {
  uni.showModal({
    title: '续费功能',
    content: '续费功能正在开发中...',
    showCancel: false
  })
}

const endOrder = () => {
  uni.showModal({
    title: '确认结束',
    content: '确定要结束当前订单吗？',
    success: (res) => {
      if (res.confirm) {
        orderStore.completeOrder(orderStore.currentOrder.id)
      }
    }
  })
}

const previewImages = (index) => {
  const urls = environmentImages.value.map(item => item.url)
  previewImage(urls, index)
}

const showAllEnvironment = () => {
  // uni.navigateTo({
  //   url: '/pages/environment/environment'
  // })
  alert('功能暂未开发...')
}

const showActivity = (activity) => {
  // uni.navigateTo({
  //   url: `/pages/activity/detail?id=${activity.id}`
  // })
  alert('功能暂未开发...')
}

const showAnnouncement = (announcement) => {
  // uni.navigateTo({
  //   url: `/pages/announcement/detail?id=${announcement.id}`
  // })
  alert('功能暂未开发...')
}

// 生命周期
onMounted(() => {
  // 初始化数据
  seatStore.initMockSeats()
  
  if (userStore.isLoggedIn) {
    orderStore.initMockOrders()
  }
  
  // 开始倒计时
  startCountdown()
})

// 倒计时相关方法
const startCountdown = () => {
  if (remainingTimeInterval.value) {
    clearInterval(remainingTimeInterval.value)
  }

  if (orderStore.currentOrder) {
    remainingTimeInterval.value = setInterval(() => {
      currentTime.value = new Date()

      // 检查订单是否过期
      if (isOrderExpired.value) {
        clearInterval(remainingTimeInterval.value)
        handleOrderExpired()
      }
    }, 1000)
  }
}

const handleOrderExpired = () => {
  uni.showModal({
    title: '订单已到期',
    content: '您的座位使用时间已到期，是否需要续费？',
    confirmText: '续费',
    cancelText: '结束',
    success: (res) => {
      if (res.confirm) {
        extendOrder()
      } else {
        endOrder()
      }
    }
  })
}

const extendOrder = () => {
  uni.showActionSheet({
    itemList: ['续费1小时 (¥6)', '续费2小时 (¥12)', '续费3小时 (¥18)'],
    success: async (res) => {
      const hours = res.tapIndex + 1
      const cost = hours * (orderStore.currentOrder?.hourlyRate || 6)

      uni.showModal({
        title: '续费确认',
        content: `确认续费${hours}小时？费用为¥${cost}`,
        success: async (confirmRes) => {
          if (confirmRes.confirm) {
            uni.showLoading({ title: '续费中...' })

            try {
              const result = await orderStore.extendOrder(orderStore.currentOrder.id, hours)
              if (result.success) {
                uni.hideLoading()
                uni.showToast({
                  title: '续费成功',
                  icon: 'success'
                })
                // 重新开始倒计时
                startCountdown()
              } else {
                uni.hideLoading()
                uni.showToast({
                  title: result.message || '续费失败',
                  icon: 'error'
                })
              }
            } catch (error) {
              uni.hideLoading()
              uni.showToast({
                title: '续费失败',
                icon: 'error'
              })
            }
          }
        }
      })
    }
  })
}

onUnmounted(() => {
  if (remainingTimeInterval.value) {
    clearInterval(remainingTimeInterval.value)
  }
})
</script>

<style lang="scss" scoped>
.index-page {
  min-height: 100vh;
  background: var(--color-background);
}

// 自定义导航栏
.custom-navbar {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  padding: 8px 16px 16px;
}

.navbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app-title {
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.location-info {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

.location-icon {
  font-size: 12px;
}

.location-text {
  font-size: 12px;
  color: white;
}

.navbar-right {
  display: flex;
  gap: 12px;
}

.action-btn {
  position: relative;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;

  .icon {
    font-size: 16px;
  }

  .badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--color-error);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    min-width: 16px;
    text-align: center;
  }
}

// 状态横幅
.status-banner {
  background: white;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
}

.status-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
}

.status-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-success);
}

.business-hours {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.weather-info {
  .weather-text {
    font-size: 12px;
    color: var(--color-text-secondary);
  }
}

// 滚动内容
.scroll-content {
  flex: 1;
  padding: 16px;
}

// 卡片基础样式
.card {
  background: white;
  border-radius: var(--radius-xl);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.update-time {
  font-size: 12px;
  color: var(--color-text-secondary);
}

// 座位状态卡片
.seat-status-card {
  .seat-stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
  }

  .stat-item {
    text-align: center;
    cursor: pointer;
    transition: transform var(--transition-fast);

    &:active {
      transform: scale(0.95);
    }

    .stat-number {
      display: block;
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 4px;
    }

    .stat-label {
      font-size: 12px;
      color: var(--color-text-secondary);
    }

    &.available .stat-number {
      color: var(--color-success);
    }

    &.occupied .stat-number {
      color: var(--color-error);
    }

    &.total .stat-number {
      color: var(--color-primary);
    }
  }

  .quick-booking-btn {
    background: linear-gradient(135deg, var(--color-gaming), var(--color-warning));
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    transition: transform var(--transition-fast);

    &:active {
      transform: scale(0.98);
    }

    .btn-text {
      color: white;
    }

    .btn-icon {
      font-size: 20px;
    }
  }
}

// 登录提示卡片
.login-prompt-card {
  border: 2px solid var(--color-primary);
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.05), rgba(0, 122, 255, 0.02));
  cursor: pointer;
  transition: all var(--transition-normal);

  &:active {
    transform: scale(0.98);
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), rgba(0, 122, 255, 0.05));
  }
}

.prompt-content {
  padding: 20px;
  text-align: center;
}

.prompt-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.prompt-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  display: block;
  margin-bottom: 8px;
}

.prompt-desc {
  font-size: 14px;
  color: var(--color-text-secondary);
  display: block;
  margin-bottom: 20px;
  line-height: 1.5;
}

.login-btn {
  width: 200px;
  height: 44px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: white;
  border: none;
  border-radius: var(--radius-xl);
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
  transition: all var(--transition-normal);

  &:active {
    transform: scale(0.95);
  }
}

// 当前订单卡片
.current-order-card {
  border: 2px solid var(--color-success);
  transition: all var(--transition-normal);

  .order-status {
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    transition: all var(--transition-normal);

    &.in-progress {
      background: rgba(52, 199, 89, 0.1);
      color: var(--color-success);
    }

    &.expired {
      background: var(--color-error);
      color: white;
      animation: pulse 2s infinite;
    }
  }

  &:has(.expired) {
    border-color: var(--color-error);
  }

  .order-content {
    .seat-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      padding: 16px;
      background: rgba(52, 199, 89, 0.05);
      border-radius: var(--radius-lg);
    }

    .seat-main {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .seat-number {
      font-size: 24px;
      font-weight: bold;
      color: var(--color-text-primary);
    }

    .seat-area {
      font-size: 14px;
      color: var(--color-text-secondary);
    }

    .time-info {
      text-align: right;
    }

    .remaining-time {
      font-size: 20px;
      font-weight: bold;
      color: var(--color-success);
      display: block;
      transition: color var(--transition-normal);

      &.expired {
        color: var(--color-error);
        animation: pulse 2s infinite;
      }
    }

    .time-label {
      font-size: 12px;
      color: var(--color-text-secondary);
      margin-top: 4px;
    }

    .order-details {
      margin: 16px 0;
      padding: 16px;
      background: rgba(0, 122, 255, 0.05);
      border-radius: var(--radius-lg);
      border: 1px solid rgba(0, 122, 255, 0.1);
    }

    .detail-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .detail-label {
      font-size: 14px;
      color: var(--color-text-secondary);
    }

    .detail-value {
      font-size: 14px;
      font-weight: 500;
      color: var(--color-text-primary);
    }
  }

  .order-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
  }
}

// 快捷功能
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.action-item {
  background: white;
  border-radius: var(--radius-lg);
  padding: 20px 16px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
  position: relative;

  &:active {
    transform: scale(0.95);
  }
}

.auth-required {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 12px;
  opacity: 0.7;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.action-icon {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;

  &.gaming {
    background: linear-gradient(135deg, var(--color-gaming), var(--color-warning));
  }

  &.orders {
    background: linear-gradient(135deg, var(--color-warning), #ffcc02);
  }

  &.recharge {
    background: linear-gradient(135deg, var(--color-success), #5ad427);
  }

  &.member {
    background: linear-gradient(135deg, var(--color-premium), var(--color-primary));
  }

  .icon {
    font-size: 20px;
  }
}

.action-text {
  font-size: 12px;
  color: var(--color-text-primary);
  font-weight: 500;
}

// 会员卡片
.member-card {
  background: linear-gradient(135deg, var(--color-premium), var(--color-primary));
  color: white;

  .member-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .member-avatar {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    margin-right: 16px;
    border: 3px solid rgba(255, 255, 255, 0.3);
  }

  .member-info {
    flex: 1;
  }

  .member-name {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 8px;
    display: block;
  }

  .member-level {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .level-text {
    font-size: 14px;
    opacity: 0.9;
  }

  .level-progress {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
  }

  .progress-bar {
    height: 100%;
    border-radius: 2px;
    transition: width var(--transition-normal);
  }

  .member-actions {
    .action-btn {
      background: rgba(255, 255, 255, 0.2);
    }
  }

  .member-stats {
    display: flex;
    justify-content: space-around;

    .stat-item {
      text-align: center;
      cursor: pointer;
      transition: transform var(--transition-fast);

      &:active {
        transform: scale(0.95);
      }
    }

    .stat-number {
      color: white;
      font-size: 18px;
    }

    .stat-label {
      color: rgba(255, 255, 255, 0.8);
      font-size: 12px;
    }
  }
}

// 登录提示卡片
.login-prompt-card {
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), rgba(90, 200, 250, 0.1));
  border: 1px solid rgba(0, 122, 255, 0.2);

  .login-content {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .login-icon {
    font-size: 32px;
    color: var(--color-primary);
  }

  .login-text {
    flex: 1;
  }

  .login-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    display: block;
    margin-bottom: 4px;
  }

  .login-subtitle {
    font-size: 12px;
    color: var(--color-text-secondary);
  }

  .login-arrow {
    font-size: 20px;
    color: var(--color-primary);
  }
}

// 区域标题
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.section-more {
  font-size: 14px;
  color: var(--color-primary);
}

// 环境展示
.environment-section {
  margin-bottom: 24px;
}

.environment-scroll {
  white-space: nowrap;
}

.environment-item {
  display: inline-block;
  margin-right: 16px;
  cursor: pointer;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
  position: relative;
  overflow: hidden;

  &:active {
    transform: scale(0.95);
  }
}

.environment-image {
  width: 140px;
  height: 100px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  display: block;
}

.environment-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  padding: 20px 8px 12px;
  line-height: 1.2;
}

// 活动列表
.activity-section {
  margin-bottom: 24px;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: row;
  transition: transform var(--transition-fast);

  &:active {
    transform: scale(0.98);
  }
}

.activity-image {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  object-fit: cover;
}

.activity-content {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.activity-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.activity-desc {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

.activity-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activity-time {
  font-size: 12px;
  color: var(--color-text-tertiary);
}

.activity-tag {
  background: var(--color-gaming);
  color: white;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

// 公告列表
.announcement-section {
  margin-bottom: 24px;
}

.announcement-list {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.announcement-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-fast);

  &:last-child {
    border-bottom: none;
  }

  &:active {
    background-color: var(--color-background);
  }
}

.announcement-content {
  flex: 1;
}

.announcement-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 4px;
  display: block;
}

.announcement-time {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.announcement-arrow {
  font-size: 16px;
  color: var(--color-text-tertiary);
}

// 底部间距
.bottom-spacing {
  height: 20px;
}

// 按钮样式
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);

  &:active {
    transform: scale(0.95);
  }

  &.btn-primary {
    background: var(--color-primary);
    color: white;
  }

  &.btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
  }

  &.btn-small {
    padding: 6px 12px;
    font-size: 12px;
  }

  .btn-text {
    color: inherit;
  }
}

// 动画
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
</style>
